<!-- Author:Rain -->

<template>
    <div class="rain-form-item">
        <div class="rain-item-lable">
            <span>{{title}}</span>
        </div>
        <div class="rain-item-content">
            <div tabindex="1" class="rain-target rain-time">
                <span>{{ date.year }}-{{ date.month }}</span>
                <div @click="openOrclose"
                    style="width: 100%;height: 100%;position: absolute;top: 0;left: 0;"></div>
                <i class="rain-iconfont">&#xe616;</i>
                <div style="z-index: 1000;" class="rain-drop" v-show="!isAllclose">
                    <div class="years" v-show="status.tabYear">
                        <div class="picker-header">
                            <span @click="Decade(-10)" class="rain-iconfont">&#xe600;</span>
                            <span>{{ startYear }} - {{ startYear + 9 }}年</span>
                            <span @click="Decade(10)" class="rain-iconfont">&#xe601;</span>
                        </div>
                        <div class="picker-content">
                            <span @click="todoYear(num)" v-for="num in 10" class="cell year"
                                :class="{ 'disable': startYear + num - 1 > 2034 }">{{ startYear + num - 1
                                }}</span>
                        </div>
                    </div>
                    <div class="month" v-show="status.tabMonth">
                        <div class="picker-header">
                            <span @click="changeYear(-1)" class="rain-iconfont">&#xe600;</span>
                            <span>{{ date.year }}年</span>
                            <span @click="changeYear(1)" class="rain-iconfont">&#xe601;</span>
                        </div>
                        <div class="picker-content">
                            <span @click="todoMonth(mon)" v-for="mon, index in 12" class="cell year">{{ character[index] }}月</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts" name="rain-input">
let props=defineProps(["title","value"])
let emit=defineEmits(["sendTime"])

let {year,month}=markRaw(props.value ||{year:"xxxx",month:"xx"})

function openOrclose(){
    if(status.tabYear){
        status.tabYear=false
    }
    if(isAllclose.value){
        status.tabYear=true
    }
}

//我想这里应该要写很多的逻辑
let startYear = ref(2020)
function Decade(num: number) {
    //给定一个范围1950-2024
    let year = startYear.value + num
    if (year + 10 > 2034 || year < 1950) return;
    startYear.value += num
}

//进行值的选择
let date = reactive({
    year: year||"xxxx",
    month: month||"xx"
})

const character = ["一", "二", "三", "四", "五", "六", "七", "八", "九", "十", "十一", "十二"]
//按月改变年份
function changeYear(val: number) {
    date.year = +date.year + val + ""
}

//年月选择表显示状态的控制
let status = reactive({
    tabYear: false,
    tabMonth: false
})

let isAllclose=computed(()=>{
    return !(status.tabMonth || status.tabYear)
})

function todoYear(num: number) {
    startYear.value + num - 1 <= 2030 &&
        (date.year = (startYear.value + num - 1) + '')
        && !(status.tabYear = false) &&
        (status.tabMonth = true)
}

function todoMonth(num:number){
    date.month=num+""
    status.tabMonth=false

    //发送出去
    emit("sendTime",{year:date.year,month:date.month})
}



</script>

<style scoped>
@import url("./css/formitems.css");
</style>